<template>
  <div class="big-card">
    <el-card shadow="hover">
      <div class="item" :style="'height:' + cardHeight + 'px'">
        <div class="title">
          <div class="name">{{title}}</div>
          <div class="info">{{info}}</div>
        </div>
        <div class="content">
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in dataList" :key="index">
              <div class="book">
                <svg-icon icon-class="circle"></svg-icon>
                <div class="other" :class="index > (dataList.length - 4) ?'last-item':''">
                  <div class="name" @click="handleToChapter(item.id)">{{item.name}}</div>
                  <div class="num">点击量: {{item.click_num}}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "bigcard",
  props: {
    title: String,
    info: String,
    dataList: Array,
    cardHeight: String
  },
  watch: {
    dataList(val) {
      this.dataList = val;
    }
  },
  methods: {
    handleToChapter(id) {
      this.$router.push({
        path: "/chapter",
        query: { id }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.big-card {
  width: 956px;
  background: rgba(255, 255, 255, 1);
  border-radius: 12px;
  .item {
    padding: 36px 34px;
    .title {
      text-align: left;
      width: 888px;
      border-bottom: 1px solid rgba(6, 27, 65, 0.05);
      padding-bottom: 22px;
      .name {
        font-size: 20px;
        font-family: MicrosoftYaHeiSemibold;
        font-weight: 600;
        color: rgba(6, 27, 65, 0.65);
        line-height: 14px;
        margin-bottom: 10px;
      }
      .info {
        font-size: 12px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(6, 27, 65, 0.45);
        line-height: 14px;
      }
    }
    .content {
      .book {
        display: flex;
        justify-content: space-between;
        padding-top: 24px;
        .svg-icon {
          font-size: 12px;
        }
        .other {
          display: flex;
          margin-left: 12px;
          width: 100%;
          justify-content: space-between;
          padding-bottom: 24px;
          border-bottom: 1px solid rgba(6, 27, 65, 0.05);
          .name {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            font-weight: 400;
            color: rgba(6, 27, 65, 0.45);
            line-height: 14px;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 65%;
            text-align: left;
          }
          .name:hover {
            color: #92c8ff;
          }
          .num {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            font-weight: 400;
            color: rgba(6, 27, 65, 0.45);
            line-height: 14px;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.content {
  .el-row:last-child {
    .book {
      .other {
      }
    }
  }
}

.big-card:hover {
  transform: translateY(-3px);
  transition: all 0.3s linear;
}

.last-item {
  border-bottom: none !important;
}
</style>